//   初始化swiper
var mySwiper = new Swiper('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    autoplay: true,

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
})

/* 需求：鼠标悬停改变api，li颜色，和图片 */

let apili = document.querySelectorAll('.api ul li')
    // console.log(apili);
    // 方法一：把图片名字改得有规律，再改图片路径
    // apili.forEach(function(dom, i) {
    //     dom.addEventListener('mouseover', function() {
    //         // 这里不用写querySelectorAll,因为dom是已经forEach过的
    //         dom.querySelector('img').src = `../imgs/api0${i+1}-c.svg`
    //         dom.querySelector('p').style.color = '#fff'
    //         this.style.background = '#2f7ee9'
    //     })
    //     dom.addEventListener('mouseout', function() {
    //         dom.querySelector('img').src = `../imgs/api0${i+1}.svg`
    //         dom.querySelector('p').style.color = '#181818'
    //         this.style.background = '#fff'


//     })
// })
// 方法二：不改图片路径，获取图片路径，
apili.forEach(function(dom, i) {
    let fileName = ''
    dom.addEventListener('mouseover', function() {
        // 这里不用写querySelectorAll,因为dom是已经forEach过的
        //找当前li的孙子img: 以下都可以
        //console.log(this.querySelector('img'));
        // 找li第一个孩子a，a再找a第一个孩子img
        //console.log(this.children[0].children[0]);
        // li找li第一个元素节点a，a再找a第一个元素节点孩子img
        //console.log(this.firstElementChild.firstElementChild);
        let imgsrc = dom.querySelector('img').src;
        // lastIndexOf('x'):从后面开始获取x第一次出现的索引
        let firstsrc = imgsrc.lastIndexOf('.');
        let lastsrc = imgsrc.lastIndexOf('/');
        // 截取字符串imgsrc的区间值
        fileName = imgsrc.substring(lastsrc + 1, firstsrc);

        dom.querySelector('img').src = `../imgs/${fileName}-c.svg`
        dom.style.background = '#2f7ee9'
        dom.querySelector('p').style.color = '#fff'
    })
    dom.addEventListener('mouseout', function() {
        dom.querySelector('img').src = `../imgs/${fileName}.svg`
        dom.querySelector('p').style.color = '#181818'
        this.style.background = '#fff'
    })
})

/* 需求：银行跑马灯播放,当前运动时清除上一个运动 */
// let busList = document.querySelectorAll('.bus-list')

// // 定义跑马灯激活样式变量
// let index = 0

// function too() {


//     // 清除上一个busList的激活样式
//     busList[index].classList.remove('active')

//     ++index
//     if (index === busList.length) index = 0;

//     //添加当前busList的激活样式
//     busList[index].classList.add('active')

// }

// // 函数定时器里不加()，加()等于在定时器里调用函数
// let timeId = setInterval(too, 1000)

// /* 需求：鼠标悬停清除定时器，离开再开启定时器 */

// let container = document.querySelector('.business .content .container')

// // console.log(container);
// container.addEventListener('mouseover', function() {
//     // clearInterval() 里写要清除的定时器名字，不是写函数
//     clearInterval(timeId)
// })
// container.addEventListener('mouseout', function() {
//     //这里的定时器必须写和之前相同的定时器名字
//     // 不然开启的不是同一个定时器
//     // 也不能加let，let局部变量，加了也代表和之前不是相同的定时器
//     timeId = setInterval(too, 1000)
// })




/* 需求：跑马灯效果，清除上一个激活样式，在给当前添加激活样式 */
let busList = document.querySelectorAll('.bus-list')
    // console.log(busList);
    // 定义激活样式索引变量
let index = 0

// 给定时器命名,后面好用
// setInterval里函数不加()，加()相当于在定时器里调用函数
let timer = setInterval(foo, 1500)

// 封装了一个foo函数,可以调用
function foo() {
    busList[index].classList.remove('active')
        ++index
    if (index === busList.length) index = 0
    busList[index].classList.add('active')
}

/* 需求：鼠标悬停清除定时器，离开再调用定时器 */
// 获取包裹三个银行的大盒子
let container = document.querySelector('.business .content .container')
    // console.log(container);
container.addEventListener('mouseover', function() {
    // 清除定时器，()里是写定时器名，不加()
    clearInterval(timer)
})
container.addEventListener('mouseout', function() {
    // 清除定时器，定义定时器名不加let
    // 一定要写开启哪个定时器
    timer = setInterval(foo, 1500)
})

/**
 * 需求: 窗口滚动时,判断当前的滚动距离大于等于600,显示top,否则就隐藏
 */
let backTop = document.querySelector('.top')
window.addEventListener('scroll', function() {
    //滚动距离
    scrollY = document.documentElement.scrollTop

    if (scrollY >= 600) {
        backTop.style.display = 'block'
    } else {
        backTop.style.display = 'none'
    }
})

/**
 * 需求: 点击backTop按钮,回到顶部
 */
backTop.addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    })
})